laypage切换一页显示多少条不生效 您所在的位置:网站首页 layui radio不显示 laypage切换一页显示多少条不生效

laypage切换一页显示多少条不生效

2024-01-22 05:47| 来源: 网络整理| 查看: 265

最近解决一个问题,接口请求传参以及返回值都正确。但是唯独切换每页显示多少条的时候就是不生效。

问题代码如下:

//加载layui的table表格 $scope.loadTableFun = function (){ layui.use(['form', 'element', 'table', 'laypage', 'layer', 'upload', 'laydate'], function () { var $ = layui.jquery, form = layui.form, table = layui.table, layer = layui.layer, laypage = layui.laypage, element = layui.element, upload = layui.upload, laydate= layui.laydate; var tableHeader = $scope.searchConditionList.filter(function(sItem){ return sItem.IsListView; }).map(function(tjItem){ tjItem.field = tjItem.name; // tjItem.width = "100"; // tjItem.templet=""+tjItem.labelName+"" if(tjItem.name === 'aptType'){ tjItem.width = "15%"; } else if(tjItem.name === 'kbDesc'){ tjItem.width = "20%"; } tjItem.style = "word-break: break-all"; // tjItem.minWidth = "100"; return tjItem; }); ........ //执行获取分页数据的回调函数 getData(layer,$scope.competorGuide, function(resData){ if(resData.Result){ var allTableData = []; // 把查询接口返回的resData 赋值给 allTableData中即可 allTableData = resData.List.map(function(rdItem){ var tmpObj = Object.assign({},{ID:rdItem.ID}, rdItem.listData); return tmpObj; }); } // 在这里进行table.render table.render({ elem: '#allData' ,id: 'allData' ,data: allTableData ,cols: [tableHeader] ,done: function (res, curr, count) { // 分页 laypage.render({ elem: 'paging' , curr: $scope.pageInfo.pageIndex , count: resData.Total , limit: $scope.pageInfo.pageSize , limits: [5, 10, 15, 20] , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'] ,prev: '' ,next: '' ,first: '' ,last: '' , jump: function (obj, first) { $scope.pageInfo.pageIndex = obj.curr; $scope.pageInfo.pageSize = obj.limit; if (!first) { $scope.loadTableFun(); } return false; } }); //监听工具条 编辑、删除、预览、下载 table.on("tool(allData)", function (obj) { var data = obj.data, events = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象; switch(events){ case "allData_edit": ...... //编辑的方法 break; case "allData_del": layer.confirm('确认要删除?', {icon: 3, title:'提示'}, function(index){ ....... //删除的方法 layer.close(index); }); break; } }); } ,limit: 5 //每页默认显示的数量 }); }); }); }

 如果单独看laypage,一直找不到任何问题。最终找到,问题不在laypage上,问题在table的limit属性上。把limit改成$scope.pageInfo.pageSize变量即可。之前是写死的数值5。

 table.render({

                    elem: '#allData'

                    ,id: 'allData'

                    ,data: allTableData

                    ,cols: [tableHeader]

                    ,done: function (res, curr, count) {

                          //laypage 分页初始化    

                           laypage.render({

                              elem: 'paging'

                            , curr: $scope.pageInfo.pageIndex

                            , count: resData.Total

                            , limit: $scope.pageInfo.pageSize

                            , limits: [5, 10, 15, 20]

                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']

                            ,prev: ''

                            ,next: ''

                            ,first: ''

                            ,last: ''

                            , jump: function (obj, first) {

                                  console.info("分页---jump===",obj,first);

                                  $scope.pageInfo.pageIndex = obj.curr;

                                  $scope.pageInfo.pageSize = obj.limit;

                                  if (!first) {

                                      $scope.loadTableFun();

                                  }

                                  return false;

                            }

                        });

                     },        

                    ,limit: $scope.pageInfo.pageSize //每页默认显示的数量

});



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有